<template>
    <el-row :gutter="12">
      <el-col v-if="isAdmin" :span="span">
        <div class="statistic-card">
          <el-statistic :value="info.orgTotal">
            <template #title>
              <div class="title">
                医院总数
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="span">
        <div class="statistic-card">
          <el-statistic :value="info.cameraTotal">
            <template #title>
              <div class="title">
                监控点总数
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="span">
        <div class="statistic-card">
          <el-statistic :value="info.sensorTotal">
            <template #title>
              <div class="title">
                传感器总数
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </template>
  
  <script lang="ts" setup>
  import {getBaseCount} from '@/api/h3yun'
  import { computed, onMounted, ref, watch } from 'vue'

  const props = defineProps<{
    areaCode: string,
    isAdmin: boolean
  }>()
  const span = computed(() => props.isAdmin ? 8 : 12)
  const info: any = ref({})

  watch(() => props.areaCode, () => {
    initData()
  })

  const initData = async () => {
    let res = await getBaseCount(props.areaCode)
    info.value = res.data
  }

  onMounted(() => {
    initData()
  })
  </script>
  
  <style scoped lang="scss">
  .el-statistic {
    --el-statistic-content-font-size: 28px;
    --el-statistic-content-color: #fff;
  }
  
  .statistic-card {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    .title {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }
  }
  </style>
  